<!--
 @description 经销商变更单项
 @fileName CustomerChangeItem.vue
 @author zengqiongying
 @created 2023/04/24 15:42:41
-->
<template>
  <div class="list-item" @click="onDetail">
    <div class="i-top">
      <span v-if="itemData.type === 'A'">{{ itemData.code }}</span>
      <span v-else>{{ itemData.customerCode }}</span>
      <span
        :class="{
          'color-normal': itemData.schedule === 'A',
          'color-org': itemData.schedule === 'B',
          'color-grey': !['A', 'B'].includes(itemData.schedule)
        }"
      >
        {{ getProgressName(itemData.schedule) }}
      </span>
    </div>
    <div class="title black">{{ itemData.customerName }}</div>
    <div class="tags">
      <span class="tag-line">{{ itemData.officeName }}</span>
    </div>
    <div class="content">
      <div v-if="itemData.type === 'B'" class="black">门店名称：{{ itemData.shopName }}</div>
      <div v-if="['A', 'B'].includes(itemData.type)" class="color-normal">
        申请人：<span>{{ itemData.createBy }}</span>
      </div>
      <div v-else>
        单据类型：<span
          :class="{
            'color-black': !['C', 'D', 'E', 'F', 'G'].includes(itemData.type),
            'color-org': ['D', 'E'].includes(itemData.type),
            'color-normal': ['C', 'F', 'G'].includes(itemData.type)
          }"
        >
          {{ getTypeName(itemData.type) }}
        </span>
      </div>
      <div>
        {{ dateLabel }}：<span class="color-black">{{ createDate }}</span>
      </div>
      <div v-if="['E', 'F'].includes(itemData.type)">
        <!-- 仅冻结解冻 -->
        提报类型：<span class="color-black">{{
          itemData.reportType === 'A' ? '客户经理提报' : itemData.reportType === 'B' ? '档案科提报' : ''
        }}</span>
      </div>
    </div>
    <div v-if="itemData.schedule === 'A'" class="btns">
      <div class="btn radius-larg ctm-btn-grey-outline" @click.stop="onStop">终止</div>
      <div v-if="enbleEdit" class="btn radius-larg ctm-btn-main-outline" @click.stop="onEdit">编辑</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { getDictName } from '@/apis/dealerMarketing/CusDictData'
  import { useStore } from 'vuex'
  import { parseTime } from '@/utils'
  interface anyJSONInterFace {
    [key: string]: any
  }
  export default defineComponent({
    name: 'CustomerChangeItem',
    props: {
      itemData: {
        type: Object,
        default: () => {}
      },
      timeField: {
        type: String,
        default: 'createTime'
      }
    },
    setup(props, { emit }) {
      const $store = useStore()
      const onStop = () => {
        emit('stop')
      }
      const onEdit = () => {
        emit('edit')
      }
      const onDetail = () => {
        emit('detail')
      }
      const getProgressName = (code: string) => {
        return getDictName('CTM_CUS_ARCHIVE_CHANGE_PROGRESS', code)
      }
      const getTypeName = (code: string) => {
        return getDictName('CTM_CUS_ARCHIVE_CHANGE_TYPE', code)
      }
      const createDate = computed(() => {
        return parseTime(props.itemData[props.timeField], '{y}年{m}月{d}日')
      })
      const dateLabel = computed((schedule: string) => {
        const labelJSON: anyJSONInterFace = {
          A: '申请时间',
          B: '申请时间',
          C: '变更申请时间',
          D: '变更申请时间',
          E: '申请时间',
          F: '申请时间',
          G: '变更申请时间',
          H: '变更申请时间',
          I: '申请时间'
        }
        return labelJSON[schedule] || '申请时间'
      })

      const appRoleList = computed(() => {
        const user = $store.getters.userInfo || {}
        const roles = (user && user.appRoleDTOList) || []
        return roles.map((v: any) => v.roleName)
      })
      // 是否允许编辑
      const enbleEdit = computed(() => {
        if (!['E', 'F'].includes(props.itemData.type)) {
          return true
        }
        // 冻结/解冻：需判断用户角色进行权限处理:
        // 客户经理只能对数据类型为“客户经理提报 A “的数据进行编辑；
        // 档案科只能对数据类型为“档案科提报 B ”的数据进行编辑；
        if (props.itemData.reportType === 'A') {
          return appRoleList.value.some((name: any) => name === 'CTM-客户经理角色')
        } else if (props.itemData.reportType === 'B') {
          return appRoleList.value.some((name: any) => name === 'CTM-档案科')
        }
        return false
      })
      return {
        onEdit,
        onStop,
        onDetail,
        getProgressName,
        getTypeName,
        createDate,
        dateLabel,
        enbleEdit
      }
    }
  })
</script>
<style lang="less" scoped>
  .list-item {
    margin-bottom: 8px;
    padding: 16px;
    background: var(--bg-global-weaker);
    border-radius: 8px;
    font: var(--font-main-body);
    color: var(--texticon-default-stronger);
    .i-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 20px;
      // font: var(--font-main-body);
      color: var(--texticon-color-brand-normal);
    }
    .title {
      padding: 2px 0;
      min-height: 22px;
      font: var(--font-main-title-strengthen);
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .tag-line {
        position: relative;
        display: inline-flex;
        padding: 0 8px;
        height: 20px;
        margin-bottom: 2px;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          width: 0;
          height: 14px;
          border: 1px solid var(--divisionline-normal);
          transform: translateY(-50%);
        }
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          padding-right: 0;
          &::after {
            display: none;
          }
        }
      }
    }
    .content {
      margin-top: 6px;
      div {
        padding: 2px 0;
      }
    }
    .btns {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      .btn {
        width: 88px;
        height: 36px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
